---
import BaseLayout from '../../layouts/BaseLayout.astro';
import BlogPost from '../../components/BlogPost.astro';
export async function getStaticPaths() {
  const allPosts = await Astro.glob('../posts/*.md');
  const uniqueTags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
//   return [
//     {params: {tag: "astro"}, props: {posts: allPosts}},
//     {params: {tag: "successes"}, props: {posts: allPosts}},
//     {params: {tag: "community"}, props: {posts: allPosts}},
//     {params: {tag: "blogging"}, props: {posts: allPosts}},
//     {params: {tag: "setbacks"}, props: {posts: allPosts}},
//     {params: {tag: "learning in public"}, props: {posts: allPosts}}
//   ]
return uniqueTags.map((tag) => {
    const filteredPosts = allPosts.filter((post) => post.frontmatter.tags.includes(tag));
    return {
      params: { tag },
      props: { posts: filteredPosts },
    };
  });
}

const { tag } = Astro.params;
const { posts } = Astro.props;
// const filteredPosts = posts.filter((post) => post.frontmatter.tags?.includes(tag));
---
<BaseLayout pageTitle={tag}>
    <p>Posts tagged with {tag}</p>
    <ul>
      <!-- {filteredPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)} -->
      <!-- {filteredPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)} -->
      {posts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
    </ul>
  </BaseLayout>